import EventList from "./eventList";
import { filePrefix } from "@/hooks/useSystem";
import { EventDetail, useVideo } from "../../hooks/useVideo";
import { EventInfo } from "../../interface";
import { dayjs } from "element-plus";
import AirConditioner1Img from "@/assets/images/iot/device/deviceInfo/airConditioner1.png";
export default defineComponent({
	setup() {
		let { dictMap, getAiInfo } = useVideo();
		const state = reactive({
			dictMap: dictMap,
			event: {} as EventInfo,
			aiInfo: {} as EventDetail
		});
		watch(
			() => state.event,
			() => {
				if (state.event) {
					state.aiInfo = getAiInfo(state.event.value);
				}
			}
		);
		return () => {
			return (
				<>
					<div class="right-video item-container">
						<div class="title">AI事件</div>
						<div class="body" style="height: calc(100% - 40px);">
							{!state.aiInfo?.image ? (
								<div class="p-4">暂无AI事件</div>
							) : (
								<div class="flex h-full">
									<div class="ai-img flex">
										{state.aiInfo?.image?.map((item, index) => {
											return (
												<el-image
													fit="contain"
													hide-on-click-modal
													initial-index={index}
													preview-src-list={state.aiInfo.image.map((item: any) => `${filePrefix()}${item}`)}
													// src={`${filePrefix()}${item}`}
													src={AirConditioner1Img}
												/>
											);
										})}
									</div>
									<div class="ai-info pl-4 pt-4">
										<div class="">{state.event.devName || state.event.devSn}</div>
										{state.aiInfo.event &&
											Object.entries(state.aiInfo.event).map(item => {
												return (
													<div class="pt-4">
														<div class="flex items-center">
															<span class="label">时间：</span>
															<span class="value">{dayjs(state.aiInfo.timestamp).format("YYYY-MM-DD HH:mm:ss")}</span>
														</div>
														<div class="flex items-center">
															<span class="label">类型：</span>
															<span class="value">{state.dictMap[item[0]]?.label}</span>
														</div>
														<div class="flex items-center">
															<span class="label">置信度：</span>
															<span class="value">
																{item[1].map(detail => {
																	return Array.isArray(detail.probs) ? detail.probs.join("，") : detail.probs;
																})}
															</span>
														</div>
														<div class="flex items-center">
															<span class="label">区域：</span>
															<span class="value">
																{item[1].map(detail => {
																	return Array.isArray(detail.area) ? detail.area.join("，") : detail.area;
																})}
															</span>
														</div>
													</div>
												);
											})}
									</div>
								</div>
							)}
						</div>
					</div>
					{/* <VideoPanel class="right-video" videoUrl="" height="30%" /> */}
					<EventList
						class="right-event"
						onLastAi={last => {
							last?.id == state.event?.id ? null : (state.event = last);
						}}
					/>
				</>
			);
		};
	}
});
